<template>
<div>

  <el-table
    :data="roleList"
    border
    style="width: 100%">
    <el-table-column
      prop="enname"
      label="enname"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="角色名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="data_scope_name"
      label="范围"
      width="280">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button
        type="primary" size="mini" @click="menu(scope.row.id)">管理菜单</el-button>
      </template>
    </el-table-column>
  </el-table>


<el-dialog
  title="配置菜单"
  top="0"
  :visible.sync="menuDialogVisible"
  width="80%">


<el-tree :data="treedata" 
@node-click="handleNodeClick"
class="tree"
node-key="id"
default-expand-all
:indent="40"
:expand-on-click-node="false"
>
	<span class="custom-tree-node" slot-scope="{ node, data }">
		<span style="width:200px;"> 
			{{ data.name }} 
			<i class="el-icon-check green"
			v-if="data.contain"
			></i>
			<i class="el-icon-close red"
			v-else
			></i>
		</span>
	
	</span>
</el-tree>


  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
// import { transData } from '../../config/util'
import http from '@/common/http'
import util from '@/common/util'

export default {
	
	name : 'rolelist',
	
	data () {
		return {
		  	roleList : [],
		  	systemList : [],

		  	menuDialogVisible : false,

		  	treedata : [],

		  	role_id : '',
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			const para = {
				fun : 'roleList',
				cb : res => {
					console.log(res);
					this.roleList = res;
				},
				err : res => {
					this.$notify.error({
			          title: '错误',
			          message: res
			        });
				}
			};

			http(para);

			const para1 = {
				fun : 'menuConfigList',
				parent_id : '1',
				cb : res => {
					console.log('systemList');
					console.log(res);
					this.systemList = res;
				}
			};

			http(para1);
		},

		menu (id) {
			this.role_id = '';

			const para = {
				fun : 'menuForRole',
				parent_id : this.systemList[0].id,
				role_id : id,
				cb : res => {
					console.log('menuForRole');
					console.log(res);
					const result = util.transData(res, 'id', 'parent_id', 'children');
					console.log(result);

					this.role_id = id;
					this.treedata = result;
					this.menuDialogVisible = true;
					//this.systemList = res;
				}
			};
			http(para);
		},

		//设置角色菜单
		handleNodeClick(item) {
	        console.log(item);

	        let para = {
	        	fun : 'setMenuForRole',
	        	role_id : this.role_id,
	        	cb : res => {
	        		this.$notify.success({
	        			title : '成功',
	        			message : '操作成功',
	        		});
	        		this.menu(this.role_id);
	        	},
	        	err : res => {
	        		this.$notify.error({
	        			title : '失败',
	        			message : res,
	        		});
	        	}
	        };

	        //已经有这个菜单的权限
	        if(item.contain){
	        	para['id'] = item.id;
	        	para['type'] = '1';
	        }else{	//没有这个菜单的权限。
	        	para['id'] = item.parent_ids + ',' + item.id;
	        	para['type'] = '0';
	        }
	        
	        http(para);
	    },
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
.tree {
	/*width : 700px;*/
	/*padding : 20px;*/
}
</style>
